<template>
  <div>
    <div class="div_allinline" style="height: 300px">
      <div class="subdiv_allinline2" style="font-size: 50px">
        实验内容
        <p style="font-size: 10px">
          从入门到工业实践，快速提升深度学习技术能力
        </p>
      </div>
      <br />
      <div class="expProject">
        <div class="subdiv_allinline">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span
                ><i class="el-icon-s-promotion" style="margin-right: 15px"></i
                >入门类</span
              >
              <el-button style="float: right; padding: 0px 0" type="text"
                ><i class="el-icon-circle-check" style="font-size: 30px"></i
              ></el-button>
            </div>
            <div style="font-size: 15px" v-for="(item, i) of exProjectPr">
              <div @click="toExpProjectPr(item.id)">{{ item.title }}</div>
              <br />
            </div>
          </el-card>
        </div>
        <div class="subdiv_allinline">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span
                ><i class="el-icon-s-promotion" style="margin-right: 15px"></i
                >进阶类</span
              >
              <el-button style="float: right; padding: 0px 0" type="text"
                ><i class="el-icon-circle-check" style="font-size: 30px"></i
              ></el-button>
            </div>
            <div style="font-size: 15px" v-for="(item, i) of exProjectIt">
              <div @click="toExpProjectIt(item.id)">{{ item.title }}</div>
              <br />
            </div>
          </el-card>
        </div>
        <div class="subdiv_allinline">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span
                ><i class="el-icon-s-promotion" style="margin-right: 15px"></i
                >高级类</span
              >
              <el-button style="float: right; padding: 0px 0" type="text"
                ><i class="el-icon-circle-check" style="font-size: 30px"></i
              ></el-button>
            </div>
            <div style="font-size: 15px" v-for="(item, i) of exProjectHi">
              <div @click="exProjectHii(item.id)">{{ item.title }}</div>
              <br />
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div class="div_allinline" style="height: 300px">
      <div class="subdiv_allinline2" style="font-size: 50px">
        项目内容
        <p style="font-size: 10px">
          从入门到工业实践，快速提升深度学习技术能力
        </p>
      </div>
      <br />
      <div class="expProject">
        <div class="subdiv_allinline">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span
                ><i class="el-icon-s-promotion" style="margin-right: 15px"></i
                >入门类</span
              >
              <el-button style="float: right; padding: 0px 0" type="text"
                ><i class="el-icon-circle-check" style="font-size: 30px"></i
              ></el-button>
            </div>
            <div style="font-size: 15px" v-for="(item, i) of ProjectPr">
              <div @click="toProjectPr(item.id)">{{ item.title }}</div>
              <br />
            </div>
          </el-card>
        </div>
        <div class="subdiv_allinline">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span
                ><i class="el-icon-s-promotion" style="margin-right: 15px"></i
                >进阶类</span
              >
              <el-button style="float: right; padding: 0px 0" type="text"
                ><i class="el-icon-circle-check" style="font-size: 30px"></i
              ></el-button>
            </div>
            <div style="font-size: 15px" v-for="(item, i) of ProjectIt">
              <div @click="toProjectIt(item.id)">{{ item.title }}</div>
              <br />
            </div>
          </el-card>
        </div>
        <div class="subdiv_allinline">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span
                ><i class="el-icon-s-promotion" style="margin-right: 15px"></i
                >高级类</span
              >
              <el-button style="float: right; padding: 0px 0" type="text"
                ><i class="el-icon-circle-check" style="font-size: 30px"></i
              ></el-button>
            </div>
            <div style="font-size: 15px" v-for="(item, i) of ProjectHi">
              <div @click="toProjectHii(item.id)">{{ item.title }}</div>
              <br />
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MainLoad',
  data() {
    return {
      list_img: [
        { url: require('../assets/t1.png') },
        { url: require('../assets/t1.png') },
        { url: require('../assets/t1.png') },
        { url: require('../assets/t1.png') },
      ],
      user: JSON.parse(window.sessionStorage.getItem('user')),
      userFace:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      nickname: '',
      exProjectPr: {},
      exProjectIt: {},
      exProjectHi: {},
      ProjectPr: {},
      ProjectIt: {},
      ProjectHi: {},
    }
  },
  methods: {
    initUser() {
      console.log('@', this.user)
      if (this.user) {
        this.userFace = this.user.userFace
        this.nickname = this.user.nickname
      }
    },
    expProject() {
      this.$axios(`/experiment/findPr`)
        .then((res) => {
          this.exProjectPr = res.obj
          console.log(this.exProjectPr)
        })
        .catch((error) => {})
    },
    expProjectI() {
      this.$axios(`/experiment/findIt`)
        .then((res) => {
          this.exProjectIt = res.obj
          console.log(this.exProjectIt)
        })
        .catch((error) => {})
    },
    expProjectH() {
      this.$axios(`/experiment/findHi`)
        .then((res) => {
          this.exProjectHi = res.obj
          console.log(this.exProjectHi)
        })
        .catch((error) => {})
    },
    Project() {
      this.$axios(`/project/findPr`)
        .then((res) => {
          this.ProjectPr = res.obj
          console.log(this.ProjectPr)
        })
        .catch((error) => {})
    },
    ProjectI() {
      this.$axios(`/project/findIt`)
        .then((res) => {
          this.ProjectIt = res.obj
          console.log(this.ProjectIt)
        })
        .catch((error) => {})
    },
    ProjectH() {
      this.$axios(`/project/findHi`)
        .then((res) => {
          this.ProjectHi = res.obj
          console.log(this.ProjectHi)
        })
        .catch((error) => {})
    },
    toExpProjectPr(id) {
      this.$router.push({ path: '/expview', query: { expId: id } })
    },
    toExpProjectIt(id) {
      this.$router.push({ path: '/expview', query: { expId: id } })
    },
    exProjectHii(id) {
      this.$router.push({ path: '/expview', query: { expId: id } })
    },
    toProjectPr(id) {
      this.$router.push({ path: '/projectview', query: { proId: id } })
    },
    toProjectIt(id) {
      this.$router.push({ path: '/projectview', query: { proId: id } })
    },
    toProjectHii(id) {
      this.$router.push({ path: '/projectview', query: { proId: id } })
    },
  },
  created() {
    this.initUser()
    this.expProject()
    this.expProjectI()
    this.expProjectH()
    this.Project()
    this.ProjectI()
    this.ProjectH()
  },
}
</script>

<style>
.w1 {
  box-shadow: 5px 2px 6px #000;
}

.w {
  margin: 0 auto;
  width: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 1;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.small img {
  width: 100%;
  height: 100%;
}

.div_allinline {
  text-align: center;
  margin: 0 auto;
}

.subdiv_allinline {
  margin-left: 30px;
  display: inline-block;
  _display: inline;
  *display: inline;
  width: 16%;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  font-size: 20px;
}
.subdiv_allinline2 {
  margin-left: 30px;
  display: inline-block;
  _display: inline;
  *display: inline;
  width: 16%;
  display: inline-block;
  vertical-align: top;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-header,
.el-footer {
  text-align: center;
  line-height: 60px;
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.expProject {
}
</style>

